<template>
    <view class="box">
        <view class="box-card">
            <view class="box-card-top">
                <view class="box-card-1">
                    <view  class="box-card-1-name">账单总额</view>
                    <view class="box-card-1-number">99.99</view>
                </view>
                <view class="box-card-hr"></view>
                <view class="box-card-1">
                    <view  class="box-card-1-name">当前日期总额</view>
                    <view class="box-card-1-number">100.00</view>
                </view>
            </view>
            <view class="box-card-bottom">
                <view class="box-card-1">
                    <view class="box-card-1-number">1000.00</view>
                    <view class="box-card-1-name">已收款</view>
                </view>
                <view class="box-card-1">
                    <view class="box-card-1-number">1000.00</view>
                    <view class="box-card-1-name">未收款</view>
                </view>
                <view class="box-card-1">
                    <view class="box-card-1-number">1000.00</view>
                    <view class="box-card-1-name">已收款</view>
                </view>
                <view class="box-card-1">
                    <view class="box-card-1-number">1000.00</view>
                    <view class="box-card-1-name">未收款</view>
                </view>
            </view>
        </view>
        <view class="time-range-box">
            <view class="time-name">时间范围</view>
            <view class="time-range">2023-01-01～2023-01-07</view>
        </view>
        <view class="tab-list">
            <view class="tab-1" :class="activeIndex==0?' tab-1-active':''" @click="Tab(0)">已收款</view>
            <view class="tab-1" :class="activeIndex==1?' tab-1-active':''" @click="Tab(1)">未收款</view>
            <view class="tab-1" :class="activeIndex==2?' tab-1-active':''" @click="Tab(2)">未开票</view>
            <view class="tab-1" :class="activeIndex==3?' tab-1-active':''" @click="Tab(3)">已开票</view>   
        </view>
        <view class="order-list">
            <view class="order-list-1">
                <view class="order-time">2023-01-01 19:43:18</view>
                <view class="order-list-2">
                     <view class="order-list-icon">
                         <image src="/static/images/1.png"></image>
                     </view>
                     <view class="order-info">
                         <view class="order-name">A6纸专用打印机，新品首发，敬请抢购</view>
                         <view class="order-text">
                             <view class="order-price">¥20.00</view>
                             <view class="order-number">x1</view>
                         </view>
                     </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
    
    	data() {
    		return {
    			activeIndex:0
    		}
    	},
    	methods: {
    		Tab(index){
                this.activeIndex=index;
            }
    	}
    }
</script>

<style lang="scss" scoped>
    page{
        background-color: #F7F7F7;
    }
    .box{
        .order-list{
            padding: 30rpx;
            .order-list-1{
                background-color: #FFF;
                border-radius: 5rpx 5rpx 5rpx 5rpx;
                display: flex;
                flex-direction: column;
                padding: 20rpx 30rpx;
                .order-time{
                    font-size: 28rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                }
                .order-list-2{
                    display: flex;
                    .order-list-icon{
                        width: 200rpx;
                        height: 200rpx;
                        image{
                            width: 200rpx;
                            height: 200rpx;
                        }
                    }
                    .order-info{
                        margin-left: 30rpx;
                        position: relative;
                        .order-name{
                            font-size: 28rpx;
                            font-family: PingFang SC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #323232;
                        }
                        .order-text{
                            position: absolute;
                            bottom: 10rpx;
                            left: 0;
                            right: 0;
                            display: flex;
                            justify-content: space-between;
                            .order-price{
                                font-size: 30rpx;
                                font-family: PingFang SC-Medium, PingFang SC;
                                font-weight: 500;
                                color: #E96A1D;
                            }
                        }
                    }
                }
            }
        }
        .box-card{
            width: 750rpx;
            height: 370rpx;
            background: linear-gradient(315deg, #EA8C1E 0%, #E84A1D 100%);
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            position: relative;
            .box-card-top{
                display: flex;
                justify-content: space-around;
                align-items: center;
                padding: 40rpx 0;
                .box-card-1{
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    .box-card-1-number{
                        font-size: 40rpx;
                        font-family: PingFang SC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #FFFFFF;
                    }
                    .box-card-1-name{
                        font-size: 20rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                }
                .box-card-hr{
                    background-color: #FFF;
                    width: 2rpx;
                    height: 50rpx;
                    color: #FFF;
                }
            }
            .box-card-bottom {
                position: absolute;
                left: 30rpx;
                right: 30rpx;
                bottom: 46rpx;
                
                display: flex;
                align-items: center;
                justify-content: space-between;
                
                .box-card-1{
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    .box-card-1-number{
                        font-size: 28rpx;
                        font-family: PingFang SC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #FFFFFF;
                    }
                    .box-card-1-name{
                        font-size: 20rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                }
            }
        }
        .time-range-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30rpx;
            background-color: #fff;
            .time-name{
                font-size: 24rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #323232;
            }
            .time-range{
                font-size: 24rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
            }
        }
        .tab-list{
            display: flex;
            justify-content: space-between;
            background-color: #fff;
            padding: 24rpx 30rpx;
            .tab-1{
                font-size: 28rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }
            .tab-1-active{
                font-size: 28rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #E96A1D;
                position: relative;
            }
            .tab-1-active::after{
                position: absolute;
                right: 40%;
                bottom: 0;
                left: 40%;
                height: 2rpx;
                width: 30rpx;
                content: '';
                background-color: #E96A1D;
            }
        }
    }
    
</style>